<template>
  <div>
    <div class="videoList">
      <div class="list" v-for="(temp,index) in list" :key="index">
        <img :src="temp.poster | cover" alt="" class="videoImg">
        <div class="iconfont icon-bofang bofang"></div>
        <div class="iconfont icon-quanping full"></div>
        <div class="listInfo">
          <div class="title">{{temp.title}}</div>
          <div class="info">
            <div class="name">
              <span>{{temp.procucer}}</span>
              <span class="icon">丨</span>
            </div>
            <div class="tag">
              <span>创意视频</span>
              <span class="icon">丨</span>
            </div>
            <div class="see">{{temp.hit}} 次播放</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

<style lang="less">
.videoList {
  width: 100%;
  padding: 2vw 4vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 0;
  position: relative;
  .list {
    position: relative;
    //   width: 350px;
    height: 265px;
    margin: 0 10px;
    padding: 30px 10px;
    box-sizing: border-box;
    // border: 1px solid;
    .videoImg {
      width: 100%;
      //   border: 1px solid;
      height: 150px;
      overflow: hidden;
      background: #dadada;
      border-radius: 10px;
    }
  }
  .bofang {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-size: 48px;
  }
  .full {
    position: absolute;
    left: 85%;
    top: 60%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
  .listInfo {
    padding-top: 15px;
    .title {
      font-size: 14px;
    }
    .info {
      padding-top: 5px;
      display: flex;
      justify-content: flex-start;
      font-size: 12px;
      .icon {
        padding: 0 10px;
      }
    }
  }
}
</style>